<template>
    <div class="manager">
        <div id="managerTop">
            <el-image :src="require('@/assets/logo_remove_background2.png')" style="height: 90%"></el-image>
            <span id="title">山口老年颐养中心</span>
            <span id="user">用户 {{this.$route.query.uname}} , 你好</span>
        </div>

        <div id="middle">
            <div id="function">
                <el-col :span="12">
                    <el-menu
                            :default-active="$route.path"
                            class="el-menu-vertical-demo"
                            background-color="rgb(15,70,121)"
                            text-color="#fff"
                            router
                            unique-opened
                            active-text-color="#ffd04b"
                    >
                        <el-submenu index="1" v-show="(this.power!='用户')">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>系统管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="index/sub-div/usermanager" @click="clickFunction">用户管理</el-menu-item>
                                <el-menu-item index="index/sub-div/approval" @click="clickFunction">外出请求审批管理</el-menu-item>
                                <el-menu-item index="index/sub-div/leaveapproval" @click="clickFunction">退住请求审批管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2" v-show="(this.power!='管理员')">
                            <template slot="title">
                                <i class="el-icon-user"></i>
                                <span>床位管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="index/sub-div/checkbed" @click="clickFunction">床位查看</el-menu-item>
                                <el-menu-item index="index/sub-div/choosebed" @click="clickFunction">床位管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <el-submenu index="3" v-show="(this.power!='管理员')">
                            <template slot="title">
                                <i class="el-icon-user"></i>
                                <span>出入登记管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="index/sub-div/checkin" @click="clickFunction">入住登记管理</el-menu-item>
                                <el-menu-item index="index/sub-div/goout" @click="clickFunction">外出登记管理</el-menu-item>
                                <el-menu-item index="index/sub-div/leave" @click="clickFunction">退住管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>

                        <el-submenu index="4" v-show="(this.power!='管理员')">
                            <template slot="title">
                                <i class="el-icon-document-copy"></i>
                                <span>膳食管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="index/sub-div/foodcalendar" @click="clickFunction">膳食日历设置</el-menu-item>
                                <el-menu-item index="index/sub-div/fooddistribute" @click="clickFunction">膳食分配</el-menu-item>

                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="5" v-show="(this.power!='管理员')">
                            <template slot="title">
                                <i class="el-icon-document-copy"></i>
                                <span>护理管理</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="index/sub-div/nursingchoose" @click="clickFunction">护理级别</el-menu-item>
                                <el-menu-item index="index/sub-div/nursingcontent" @click="clickFunction">护理内容</el-menu-item>
                                <el-menu-item index="index/sub-div/nursingrecord" @click="clickFunction">护理记录</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </div>

            <div id="mainFunction">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted(){
            console.log(this.$route.query.uname);
            console.log(this.$route.query.power);
            console.log(this.$route.query.id);
            this.getUserName();
        },
        data() {
            return {
                uname:"",
                id:"",
                power:"",
                url:'../assets/logo.png',
                fits: ['fill', 'contain', 'cover', 'none', 'scale-down']
            };
        },

        methods: {
            show()
            {

            },
            getUserName()
            {
                this.$data.uname=this.$route.query.uname;
                this.$data.id=this.$route.query.id;
                this.$data.power=this.$route.query.power;
                console.log(this.$data.id);
                console.log(this.$data.uname);
                console.log(this.$data.power);

            },
            oneClickFunction(keyPath)
            {
                /* console.log(keyPath.index); */
                this.$router.push({path:"/"+keyPath.index,query:{uname:this.$data.uname,power:this.$route.query.power,id:this.$route.query.id}});


            },
            clickFunction(keyPath)
            {
                /* console.log(keyPath.index); */
                this.$router.push({path:"/"+keyPath.index,query:{uname:this.$data.uname,power:this.$route.query.power,id:this.$route.query.id}}).catch(err=>err);
            },
        },
    };
</script>
<style>
    .manager
    {
        width: 100%;
        height: 100%;
    }
    #managerTop {
        width: 100%;
        height: 15%;
        background-color: rgb(15,70,121);
        /* background-image: linear-gradient(45deg, #545C64 30%, yellow );*/
        /*background: url("../assets/top.jpg") no-repeat center center; !*加载背景图*! !* 背景图不平铺 *!
        background-size: cover; !* 让背景图基于容器大小伸缩 *!
        background-attachment: fixed;*/
    }
    #managerTop #title {
        font-size: 25px;
        margin-left: 30px;
        line-height: 120px;
        margin-top: 100px;
        color: #EDBF71;
    }
    #managerTop #user {
        float: right;
        margin-top: 100px;
        margin-right: 80px;
        color: white;
    }

    .manager #middle {
        width: 100%;

    }
    .manager #middle #mainFunction
    {
        width: 1235px;
        height: 100%;
        margin-left: 280px;
    }
    .manager #middle #function
    {
        float: left;
    }
    .manager #middle #function {
        background-color: rgb(15,70,121);
    }
    /* 左邊導航栏width更改 */
    .manager #function .el-col-12 {
        width: 230px;
        height: 858px;


    }
    .manager #function .el-menu
    {
        width: 230px;

    }
</style>